<template>
  <div class="checkbox-demo">
    <h2>多选框组件演示</h2>

    <div class="demo-section">
      <h3>基础用法</h3>
      <CheckboxComponent
        v-model="selectedFruits"
        :checkboxList="fruitOptions"
      />
      <p>已选择: {{ selectedFruits.join(", ") }}</p>
    </div>

    <div class="demo-section">
      <h3>兴趣爱好选择</h3>
      <CheckboxComponent
        v-model="selectedHobbies"
        :checkboxList="hobbyOptions"
      />
      <p>已选择: {{ selectedHobbies.join(", ") }}</p>
    </div>

    <div class="demo-section">
      <h3>技能选择</h3>
      <CheckboxComponent
        v-model="selectedSkills"
        :checkboxList="skillOptions"
      />
      <p>已选择的技能数量: {{ selectedSkills.length }}</p>
      <p>已选择: {{ selectedSkills.join(", ") }}</p>
    </div>
  </div>
</template>

<script>
import CheckboxComponent from "@/components/form/checkbox.vue";

export default {
  name: "CheckboxDemo",
  components: {
    CheckboxComponent,
  },
  data () {
    return {
      selectedFruits: ["apple"],
      selectedHobbies: [],
      selectedSkills: ["vue", "javascript"],
      fruitOptions: [
        { label: "苹果", value: "apple" },
        { label: "香蕉", value: "banana" },
        { label: "橙子", value: "orange" },
        { label: "葡萄", value: "grape" },
        { label: "草莓", value: "strawberry" },
      ],
      hobbyOptions: [
        { label: "阅读", value: "reading" },
        { label: "运动", value: "sports" },
        { label: "音乐", value: "music" },
        { label: "旅游", value: "travel" },
        { label: "摄影", value: "photography" },
        { label: "绘画", value: "painting" },
      ],
      skillOptions: [
        { label: "Vue.js", value: "vue" },
        { label: "React", value: "react" },
        { label: "JavaScript", value: "javascript" },
        { label: "TypeScript", value: "typescript" },
        { label: "Node.js", value: "nodejs" },
        { label: "Python", value: "python" },
        { label: "Java", value: "java" },
        { label: "CSS", value: "css" },
      ],
    };
  },
};
</script>

<style lang="less" scoped>
.checkbox-demo {
  padding: 20px;

  h2 {
    color: #333;
    margin-bottom: 30px;
  }

  .demo-section {
    margin-bottom: 40px;

    h3 {
      color: #666;
      margin-bottom: 15px;
    }

    p {
      margin-top: 15px;
      padding: 10px;
      background: #f5f5f5;
      border-radius: 4px;
      color: #666;
    }
  }
}
</style>
